<script>
import {createDuel, duelDetail, duelList, getMyPokeList, joinDuel} from "@/axios/request/index.js"
import {ElMessage} from "element-plus";

const groupId = localStorage.getItem("groupId")
const userId = localStorage.getItem("userId")

export default {
  data() {
    return {
      duelList: [],
      createDuelQO: {
        groupId: null,
        userId: null,
        pokeId: null,
      },
      duelListQO: {
        pageNum: 1,
        pageSize: 10,
      },
      showMyPokeDialog: false,
      pokeListQO: {
        pokeName: null,
        attribute: null,
        isReleaseList: [0],
      },
      myPokeList: [],
      currentChoosePoke: null,
      duelDetailList: [],
      showDuelDetail: false,
      isCreate: false,
      joinDuelQO: {
        group1Id: null,
        user1Id: null,
        groupId: null,
        userId: null,
        pokeId: null,
      }
    }
  },
  created() {
    this.getDuelList()
  },
  methods: {
    showMyPoke(group1Id, user1Id, isCreate) {
      if (group1Id) {
        this.joinDuelQO.group1Id = group1Id
      }
      if (user1Id) {
        this.joinDuelQO.user1Id = user1Id
      }
      this.isCreate = isCreate
      getMyPokeList(groupId, userId, this.pokeListQO).then((result) => {
        this.myPokeList = result
        this.showMyPokeDialog = true
      })
    },
    createDuel() {
      if (this.currentChoosePoke) {
        this.createDuelQO.groupId = groupId
        this.createDuelQO.userId = userId
        this.createDuelQO.pokeId = this.currentChoosePoke.pokeId
        createDuel(this.createDuelQO).then((result) => {
        })
        this.showMyPokeDialog = false
        this.getDuelList()
      } else {
        ElMessage({
          showClose: true,
          message: "请选择poke创建对决",
          type: "error"
        })
      }
    },
    getDuelList() {
      duelList(this.createDuelQO).then((result) => {
        this.duelList = result
      })
    },
    choosePoke(currentRow) {
      this.currentChoosePoke = currentRow
    },
    duelDetail(duelId) {
      duelDetail(duelId).then((result) => {
        this.duelDetailList = result
        this.showDuelDetail = true
      })
    },
    joinDuel() {
      if (this.currentChoosePoke) {
        this.joinDuelQO.groupId = groupId
        this.joinDuelQO.userId = userId
        this.joinDuelQO.pokeId = this.currentChoosePoke.pokeId
        joinDuel(this.joinDuelQO).then((result) => {
        })
        this.showMyPokeDialog = false
        this.getDuelList()
      } else {
        ElMessage({
          showClose: true,
          message: "请选择poke加入对决",
          type: "error"
        })
      }
    },
    toDuelRoom(duelId) {
      this.$router.push("/duelRoom/" + duelId)
    },
  },
}
</script>

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right title">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size:15px;">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">poke对决</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">对决列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="query-button">
    <el-row justify="space-evenly">
      <el-col :span="6">
        <el-tooltip content="如果没人加入对决，10分钟后对决将会消失" placement="top">
          <el-button @click="this.showMyPoke(null, null, true)">创建对决</el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="6">
        <el-button @click="this.getDuelList()">查询</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="table-div">
    <el-scrollbar>
      <el-table :data="this.duelList" border height="650">
        <el-table-column label="用户1群号" prop="group1Id"></el-table-column>
        <el-table-column label="用户1名称" prop="username1"></el-table-column>
        <el-table-column label="用户1poke名称" prop="pokeName1"></el-table-column>
        <el-table-column label="用户2群号" prop="group2Id"></el-table-column>
        <el-table-column label="用户2名称" prop="username2"></el-table-column>
        <el-table-column label="用户2poke名称" prop="pokeName2"></el-table-column>
        <el-table-column label="poke名称" prop="pokeName2"></el-table-column>
        <el-table-column label="对决状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">未开始</el-tag>
            <el-tag v-if="scope.row.status === 1" type="primary">进行中</el-tag>
            <el-tag v-if="scope.row.status === 2" type="danger">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="获胜用户名称" prop="winnerUsername"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-row>
              <el-col v-if="scope.row.status !== 0">
                <el-button @click="this.duelDetail(scope.row.id)" size="small">详情</el-button>
              </el-col>
              <el-col>
                <el-button @click="this.toDuelRoom(scope.row.id)" size="small">进入对决聊天室</el-button>
              </el-col>
              <el-col v-if="scope.row.status === 0">
                <el-button @click="this.showMyPoke(scope.row.group1Id, scope.row.user1Id, false)" size="small">
                  加入对决
                </el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
  <div v-if="this.showMyPokeDialog">
    <el-dialog v-model="this.showMyPokeDialog" title="我的poke列表" width="500">
      <el-scrollbar>
        <el-table :data="this.myPokeList" border height="650" highlight-current-row
                  @current-change="this.choosePoke">
          <el-table-column label="名称" prop="pokeName"></el-table-column>
          <el-table-column label="属性">
            <template #default="scope">
              <el-tag>{{ scope.row.attribute1 }}</el-tag>
              <el-tag v-if="scope.row.attribute2 != null" style="margin-left: 5px">{{ scope.row.attribute2 }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="招式">
            <template #default="scope">
              <div v-for="pokeSkill in scope.row.pokeSkillVOList" style="margin: 2px">
                <el-tooltip :content="pokeSkill.attribute + ' ' + pokeSkill.classification" placement="top">
                  <el-tag>{{ pokeSkill.name }}</el-tag>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="属性值">
            <template #default="scope">
              <el-tag>
                <el-text type="success">生命值：</el-text>
                {{ scope.row.hp }}
              </el-tag>
              <br></br>
              <el-tag style="margin-top: 5px">
                <el-text type="danger">攻击力：</el-text>
                {{ scope.row.aggressivity }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <el-button @click="this.isCreate ? this.createDuel():this.joinDuel()" style="text-align: right">
        {{ this.isCreate ? "创建对决" : "加入对决" }}
      </el-button>
    </el-dialog>
  </div>
  <div v-if="this.showDuelDetail">
    <el-dialog v-model="this.showDuelDetail" title="对决详情" width="500">
      <el-scrollbar>
        <div v-for="duelDetail in this.duelDetailList">
          <el-tag style="margin-top: 2px">{{ duelDetail.content }}</el-tag>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<style scoped>
.query-button {
  margin-top: 5px;
  text-align: center;
  background-color: #f6f5f5;
  padding: 5px;
}

.table-div {
  margin-top: 5px;
}

.page-div {
  margin-top: 5px;
}
</style>